<template>
  <div>
    <h1>app count: {{ count }}</h1>
    <!-- 2. 将方法以自定义事件的方式绑定给子组件 -->
    <!-- 命名前后统一，命名规范：小驼峰 -->
    <Child @setCount="setCount" />

    <!-- 
      给组件绑定的事件默认都是自定义事件，除非子组件内部$emit触发，否则不会触发
     -->
    <!-- <Son @click="setCount" /> -->
    <!-- 
      绑定事件加上事件修饰符.native, 给子组件绑定的事件才是DOM事件

      $event: 
        简单理解：代表event对象
        真正理解：代表事件回调函数第一个参数
     -->
    <Son @click.native="setCount" />
  </div>
</template>

<script>
import Child from "./Child";
import Son from "./Son";

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  // 原则：数据源在哪，更新数据的方法就定义在哪
  // 1. 定义更新数据的方法
  methods: {
    setCount() {
      this.count++;
    },
  },
  components: {
    Child,
    Son,
  },
};
</script>

<style></style>
